<template>
  <div class="t_header">
    <van-nav-bar
      fixed
      :z-index="999"
      @click-left="clickLeft"
      @click-right="clickRight"
      id="hTopbar"
      :title='tabTitleName==="首页"?"":tabTitleName'
    >
      <van-icon name="bars" slot="left"></van-icon>
      <!-- 通过模板控制一哈,如果不是首页才显示对应的title,不然显示宝石图标 -->

      <van-icon name="gem" slot="title" v-if='tabTitleName==="首页"'/>
      <van-icon name="search" slot="right"/>
    </van-nav-bar>
    <van-popup v-model="show" position="top" :overlay="false">
      <div class="popCon">
        <div class="user_ctrl">
          <router-link to='/login'>登录|注册</router-link>
        </div>
        <img src="/images/xka.png" alt="">
      </div>
    </van-popup>
    <van-popup v-model="showRight" position="right" class="search_area">
      <div class="search_bar">
        <div class="go_back" @click="return_page">
          <i class="iconfont icon-zuojiantou"></i>
        </div>
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          show-action
          shape="round"
          @search="onSearch"
          background='linear-gradient(to right, #50C971, #0FBFA6)'
          class="search_ipt"
        >
          <div slot="action" @click="onSearch" class="search_btn">搜索</div>
        </van-search>
      </div>
      <div class="s_container"></div>
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'THeader',
  data() {
    return {
      show: false,
      showRight: false,
      value: ''
    }
  },
  props: {
    // 要传入的导航标题
    titleName: String
  },
  methods: {
    clickLeft() {
      this.show = !this.show
    },
    clickRight() {
      // 触发搜索页面,让用户去搜索商品
      this.showRight = !this.showRight
    },
    return_page() {
      this.showRight = false
    },
    // 搜索用户输入的关键字,暂时没有什么好数据,需要mock数据
    onSearch() {
      console.log('搜索用户输入的关键字,暂时没有什么好数据,需要mock数据')
    }
  },
  computed: {
    ...mapState(['tabTitleName'])
  }
}
</script>

<style scoped lang='stylus'>
#hTopbar
  background-color #41b883
  .van-nav-bar__left
    font-size 0.48rem
    .van-icon
      color #fff
  .van-nav-bar__right
    font-size 0.48rem
    .van-icon
      color #fff
  .van-nav-bar__title
    font-size 0.36rem
    color #fff
    .van-icon
      color #fff
.van-popup--top
  top 0.92rem
  bottom 0
  background pink
  .popCon
    background-color #2f2e3a
    width 100%
    height 100%
    color #fff
    font-size 0.8rem
    text-align center
    .user_ctrl
      background-color #fff
      a
        color #48b05c
        font-size .36rem
    img
      height 100%
.search_area
  height 100%
  left 0
  background-color #f5f5f5
  .search_bar
    position relative
    padding 0 .2rem 0 .4rem
    background-image: linear-gradient(to right, #50C971, #0FBFA6);
    .go_back
      position absolute
      left 0
      top 0.2rem
      padding .2rem
      color #fff
    .search_btn
      color #fff
    .search_ipt
      width 100%
/* .van-popup--left
 top 0.92rem
 left 0
 right 0
 bottom 0
 width 100%
 height 100%
 background pink
.popCon
   background-color #2f2e3a
   width 100%
   height 100%
   color #fff
   font-size 0.8rem
   text-align center */
</style>
